<template>
	<div style="height: 100%;" class="bgfff bra8" v-loading="loading">
		<div class="displayFlexBet" style="padding: 0 0 0 33px;">
			<div class="displayFlex" style="padding: 28px 0;">
				<div v-for="(item,index) in areaList" :key="index" class="font15 normalClass point"
					@click="chooseThis(item)">
					<span :class="[params.areaId == item.id?'selectedClass':'']">{{item.areaName}}</span>
					<span class="ml25 mr25" v-if="index != areaList.length - 1" style="color:#EDECF1">|</span>
				</div>
			</div>
			<el-popover placement="bottom" width="400" trigger="click" v-model="show1">
				<el-form ref="form" label-width="120px">
					<el-form-item label="监控对象" prop="targetId">
						<div class="displayFlexBet">
							<el-select v-model="params2.targetId" collapse-tags style="width: 100%;" placeholder="监控对象"
								filterable>
								<el-option v-for="item2 in targetList" :key="item2.id" :label="item2.targetName"
									:value="item2.id">
								</el-option>
							</el-select>
						</div>
					</el-form-item>
					<el-form-item label="画面显示">
						<el-radio-group v-model="params2.pageSize" @change="$forceUpdate()">
							<el-radio :label="1" :value="1">1个视频</el-radio>
							<el-radio :label="6" :value="6">6个视频</el-radio>
						</el-radio-group>
					</el-form-item>

					<div class="displayFlex" style="justify-content: right;">
						<el-button type="primary" class="mr10" size="mini" @click="confirmSearch">确定</el-button>
						<el-button type="primary" plain size="mini" @click="show1 = false">取消</el-button>
					</div>
				</el-form>
				<div slot="reference" class="btnClass point">选择监控对象</div>
			</el-popover>
		</div>

		<div style="display:flex;justify-content:space-between;height: calc(100% - 100px);">
			<div style="width: calc(100% - 192px);">
				<div style="display: flex;flex-wrap: wrap;" class="mb15" v-if="params.pageSize == 6">
					<div v-for="(item,index) in dataList" :key="index" class="mb50"
						style="width: calc(33.3% - 20px);margin-right: 20px;height: 253px;">
						<video :id="'videoElement'+index" controls style="width: 100%;height: 100%;"></video>
						<div class="font15 mt10" style="margin-left: 10px;color: #444;">{{item.equipmentPosition}}</div>
					</div>
				</div>
				<div class="mb15" v-if="params.pageSize == 1">
					<div v-for="(item,index) in dataList" :key="index" class="mb50"
						style="width: 100%;margin-right: 20px;height: 453px;">
						<video :id="'videoElement'+index" controls style="width: 100%;height: 100%;"></video>
						<div class="font15 mt10" style="margin-left: 10px;color: #444;">{{item.equipmentPosition}}</div>
					</div>
				</div>
				<el-empty v-if="dataList.length == 0" />
				
				<div style="margin-top: 50px;">
					<el-pagination background layout="prev, pager, next" :total="totalNum" :page-size="params.pageSize"
						@current-change="handleCurrentChange" />
				</div>
			</div>
			<div style="width: 172px;height: 100%;overflow-y: auto;">
				<div v-for="(item,index) in dataList2" :key="index" class="mb20 point"
					style="width: 100%;margin-right: 20px;position:relative" @click="showSingleVode(item)">
					<el-image :src="item.coverFile" style="width:100%;height: 115px;border-radius: 24px;" />
					<div class="font15 mt10" style="margin-left: 10px;color: #444;">{{item.equipmentPosition}}</div>
					<img src="@/assets/sIcon168.png"
						style="position:absolute;text-align:center;width: 33px;height: 33px;top: 42px;left: 75px;" />
				</div>
			</div>
		</div>

		<el-dialog title="视频" :visible.sync="show2" width="1040px" top="0px" append-to-body>
			<!-- <iframe :src="videoUrl" style="width: 100%;height: 300px;"></iframe> -->
			<video ref="singleVideoElement" controls style="width: 1000px"></video>
		</el-dialog>

	</div>
</template>

<script>
	import flvjs from 'flv.js';
	import moment from 'moment';
	let that;
	const imgUrl =
		"https://www.weifeibangbang.com/wfbb-webupload/service/sys/file/upload/view?appKey=5da5441f62e48aedc7a3853ffc75c2db&prodID=gf&fileID=";
	export default {
		components: {},
		data() {
			return {
				show1: false,
				show2: false,
				params: {
					pageIndex: 1,
					pageSize: 6,
					areaId: '',
				},
				params2: {
					pageSize: 6,
					targetId: ''
				},
				areaList: [],
				dataList: [],
				dataList2: [],
				targetList: [],
				flvPlayer: null,
				totalNum: 0,
				loading:false,
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.getGoingAreaList()
			that.getGoingTargetList()
		},

		beforeDestroy() {
			if (this.flvPlayer) {
				this.flvPlayer.destroy();
			}
		},

		methods: {

			showSingleVode(item) {
				that.show2 = true

				that.$nextTick(() => {
					let videoElement = that.$refs.singleVideoElement;
					if (flvjs.isSupported()) {
						that.flvPlayer = flvjs.createPlayer({
							type: 'flv',
							url: item.url
						});

						that.flvPlayer.attachMediaElement(videoElement);

						that.flvPlayer.load();
						that.flvPlayer.play();
					} else {
						console.error('FLV.js is not supported in this browser.');
					}
				})
			},

			confirmSearch() {
				//if (this.flvPlayer) this.flvPlayer.destroy();

				that.params.pageIndex = 1
				that.params.pageSize = that.params2.pageSize
				that.getTargetVideoList()
				that.getData()
				that.show1 = false
			},

			handleCurrentChange: function(val) {
				that.params.pageIndex = val;
				that.getData();
			},

			chooseThis(item) {
				//if (this.flvPlayer) this.flvPlayer.destroy();
				that.params.pageIndex = 1
				that.params.areaId = item.id
				that.params2.targetId = ''
				that.getData()
				that.getGoingTargetList()
			},

			getGoingTargetList() {
				that.ajax({
					url: '/video/monitor/target/getGoingTargetList?ticketId=' + that.$store.state.token,
					data: {
						areaId: that.params.areaId
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.targetList = result.data
							if (!that.params2.targetId && that.targetList.length > 0) that.params2.targetId =
								that.targetList[0].id
							that.getTargetVideoList()
						}
					},
				})
			},

			getGoingAreaList() {
				that.loading = true
				that.ajax({
					url: '/areaBaseMng/getGoingAreaList?ticketId=' + that.$store.state.token,
					data: {},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.areaList = result.data
							if (!that.params.areaId) that.params.areaId = that.areaList[0].id
							that.getData()
						}
					},
				})
			},

			getTargetVideoList() {
				that.ajax({
					url: 'video/monitor/equipment/getTargetVideoList',
					data: JSON.stringify(that.params2),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							that.dataList2 = result.data
							for (let item of that.dataList2) {
								item.coverFile = imgUrl + item.coverFileId
							}
							// setTimeout(function() {
							// 	for (let index in that.dataList2) {
							// 		let videoElement = document.getElementById("videoElement2" +
							// 			index);

							// 		let item = that.dataList[index]
							// 		if (flvjs.isSupported()) {
							// 			that.flvPlayer = flvjs.createPlayer({
							// 				type: 'flv',
							// 				url: item.url
							// 			});

							// 			that.flvPlayer.attachMediaElement(videoElement);

							// 			that.flvPlayer.load();
							// 		} else {
							// 			console.error('FLV.js is not supported in this browser.');
							// 		}
							// 	}

							// }, 1000)
						}
					}
				})
			},

			getData() {
				that.ajax({
					url: 'video/monitor/equipment/pageVideo?pageIndex=' + that.params.pageIndex + "&pageSize=" +
						that.params.pageSize + "&ticketId=" + that.$store.state.token,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							that.dataList = result.data.records
							that.totalNum = result.data.total
							setTimeout(function() {
								for (let index in that.dataList) {
									let videoElement = document.getElementById("videoElement" + index);

									let item = that.dataList[index]
									if (flvjs.isSupported()) {
										that.flvPlayer = flvjs.createPlayer({
											type: 'flv',
											url: item.url
										});

										that.flvPlayer.attachMediaElement(videoElement);

										that.flvPlayer.load();
										that.flvPlayer.play();
									} else {
										console.error('FLV.js is not supported in this browser.');
									}
									that.loading = false
								}

							}, 1000)
						}
					},
				})
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.selectedClass {
		color: #3A3EF4;
		font-weight: bold;
	}

	.normalClass {
		font-size: 15px;
		color: #888888;
	}

	.btnClass {
		width: 172px;
		line-height: 56px;
		background: #FFFFFF;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
		border-radius: 12px;
		text-align: center;
		font-size: 15px;
		color: #444;
	}
</style>